<template>
  <div>
    <button @click="ZCAlert">ZCAlert</button>
    <button @click="ZCConfirm">ZCConfirm</button>
    <button @click="ZCConfirm({type: '2'})">ZCConfirm type2</button>
    <button @click="ZCShareMask">ZCShareMask</button>
    <button @click="ZCGuideMask">ZCGuideMask</button>
    <button @click="ZCLoading">ZCLoading</button>
    <button @click="WXLoading">WXLoading</button>
    <button @click="toast">Toast</button>
    <button @click="score += 5">Score popup</button>

    <button @click="request">request</button>
    <button @click="request({loading: true})">requestWithLoading</button>

    <user-portrait :immediate="true"/>

    <div>{{calendarDate.year}}年{{calendarDate.month}}月</div>
    <calendar
      :dateList="dateList"
      @slideChange="handleSlideChange"
      @select="handleDateSelect"
    />
    <button @click="setDateList">set calendar date list</button>

    <score-popup v-if="score" :score="score" @close="score = 0"/>
  </div>
</template>

<script>
  import UserPortrait from './components/UserPortrait'
  import ScorePopup from './components/ScorePopup'
  import Calendar from './components/Calendar'

  export default {
    name: "dev",

    components: {
      Calendar,
      UserPortrait,
      ScorePopup,
    },

    data() {
      return {
        score: 0,
        dateList: [],
        calendarDate: {},
      }
    },

    methods: {
      ZCAlert() {
        this.$ZCAlert.show({
          title: 'title',
          content: 'content',
          onConfirm(){
            console.log('confirm')
          },
          onHide() {
            console.log('hide')
          }
        })
      },

      ZCConfirm(conf) {
        this.$ZCConfirm.show(Object.assign({
          title: 'title',
          content: 'content',
          onConfirm(){
            console.log('confirm')
          },
          onCancel() {
            console.log('cancel')
          },
          onHide() {
            console.log('hide')
          }
        }, conf))
      },

      ZCShareMask() {
        this.$ZCMask.show({
          kudouImg: 'https://camo.githubusercontent.com/26846e979600799e9f4273d38bd9e5cb7bb8d6d0/68747470733a2f2f7261772e6769746875622e636f6d2f616c7272612f62726f777365722d6c6f676f732f6d61737465722f7372632f6368726f6d652f6368726f6d655f34387834382e706e67'
        })
      },

      ZCGuideMask() {
        this.$ZCGuideMask.show([
          {
            window: {
              left: 41,
              bottom: 3,
              width: 44,
              height: 47,
            },
            btnStyle: {
              left: '150px',
              bottom: '100px'
            },
            desc: {
              content: '这里是学习首页哦！在这里，开启读书学习之旅。',
              //direction: 'left',
              style: {
                left: '95px',
                bottom: '152px'
              }
            },
            arrow: {
              position: {
                left: '90px',
                bottom: '190px',
              },
              style: {
                height: '135px',
                transform: 'rotateY(180deg) rotateZ(-10deg)'
              }
            },
          },
          // 裤兜爱阅读
          {
            window: {
              left: 10,
              top: 255,
              height: 170,
              width: 360
            },
            desc: {
              content: '这里是“裤兜爱读书”计划学习专区啦！',
              direction: 'left',
              style: {
                left: '15px',
                top: '65px',
              }
            },
            arrow: {
              position: {
                right: '90px',
                top: '120px'
              },
              style: {
                height: '145px',
                transform: 'rotateZ(-20deg)'
              }
            },
            btnStyle: {
              left: '140px',
              top: '190px'
            }
          }
        ])
      },

      ZCLoading() {
        this.$ZCLoading.show();

        setTimeout(() => {
          this.$ZCLoading.hide({fadeOut: true});

          // 打断fadeOut
          setTimeout(() => {
            this.$ZCLoading.show();
            setTimeout(() => {
              this.$ZCLoading.hide();
            }, 1000)
          }, 400)
        }, 1000)
      },

      WXLoading() {
        this.$ZCLoading.show({
          wxLoading: true,
          desc: '努力加载中努力加载中'
        });

        setTimeout(() => {
          this.$ZCLoading.hide()
        }, 1000)
      },

      toast() {
        this.$ZCToast.show('测试')
      },

      request({loading}) {
        this.$request(
          'http://v.zuicool.org/workspace/resource_web/Academy2/img/logo_academy.ebf9148.png', {
            loading
          }
        ).then(({data}) => {
          console.log(data)
        })
      },

      setDateList() {
        this.dateList = [
          {date: '2018-08-01', position: -1, tick: false},
          {date: '2018-08-07', position: 0, tick: true},
          {date: '2018-09-20', position: 1, tick: false},
        ]
      },

      handleSlideChange(date) {
        this.calendarDate = date;
      },

      handleDateSelect(data) {
        console.log(data)
      }
    }
  }
</script>

<style lang='less' scoped>
  @import "~swiper/dist/css/swiper.min.css";
  @import "./reset.css";

  button{
    display: block;

    margin: 5px 0;
    width: 100%;
    height: 60px;

    background-color: darkslateblue;
    color: #fff;
  }

  /deep/ .user-portrait {
    position: relative !important;
  }

  /deep/ .swiper-container{
    color: #666
  }

  /deep/ .calendar-days {
    display: inline-block;
    border: 1px solid;
    border-radius: 10px;
    width: 20px;
    height: 20px;

    font-size: 15px;
  }

  /deep/ .calendar-days-active {
    color: #fff;
    background-color: #999;
  }

  /deep/ .calendar-days-warn {
    background-color: brown;
  }

  /deep/ .calendar-days-success {
    background-color: chartreuse;
  }
</style>
